<template>
    <div>
        <h1>XML预览</h1>
        <div v-html="formattedXml"></div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            xmlString: '', // 存储XML字符串
            formattedXml: '' // 存储格式化后的XML字符串，用于渲染
        };
    },
    methods: {
        // 预览XML文件流的方法
        previewXml(fileStream) {
            // 假设fileStream是一个包含XML数据的Blob对象或者其他可以转换为字符串的流
            const reader = new FileReader();

            reader.onload = (event) => {
                this.xmlString = event.target.result;
                this.parseAndFormatXml();
            };

            reader.readAsText(fileStream);
        },
        // 解析并格式化XML字符串的方法
        parseAndFormatXml() {
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(this.xmlString, 'application/xml');
            console.log(xmlDoc,"------------------------")
            // 格式化XML字符串（可选）
            const serializer = new XMLSerializer();
            // const formattedString = this.formatXml(xmlDoc);
            // console.log(formattedString)
            // this.formattedXml = serializer.serializeToString(formattedString);

            this.formattedXml=serializer.serializeToString(xmlDoc);
            
        },


        
            // 注意：这里的formatXml方法需要你自行实现，用于美化XML字符串
            // 下面是一个简单的示例实现：
             formatXml(xml) {
              let formatted = '';
              const elements = xml.childNodes;
              for (let i = 0; i < elements.length; i++) {
                if (elements[i].nodeType === 1) { // Element node
                  let str = '\n' + '  '.repeat(this.getDepth(elements[i])) + '<' + elements[i].nodeName;
                  const attrs = elements[i].attributes;
                  for (let j = 0; j < attrs.length; j++) {
                    str += ' ' + attrs[j].nodeName + '="' + attrs[j].nodeValue + '"';
                  }
                  if (elements[i].childNodes.length === 0) {
                    str += ' />';
                  } else {
                    str += '>';
                    if (elements[i].childNodes[0].nodeType === 3) { // Text node
                      str += elements[i].childNodes[0].nodeValue.trim();
                    } else {
                      str += this.formatXml(elements[i]);
                    }
                    str += '\n' + '  '.repeat(this.getDepth(elements[i]) - 1) + '</' + elements[i].nodeName + '>';
                  }
                  formatted += str;
                } else if (elements[i].nodeType === 3) { // Text node
                  formatted += elements[i].nodeValue.trim();
                }
              }
              return xml.ownerDocument.createElement('div').appendChild(xml.ownerDocument.createTextNode(formatted)).parentNode.innerHTML;
            },

            // 同时，你还需要实现getDepth方法来获取节点的深度：
             getDepth(elem) {
              let depth = 0;
              while (elem.parentNode !== null) {
                elem = elem.parentNode;
                depth++;
              }
              return depth;
            }
    },
    // 你可以在这里调用previewXml方法，传入你的XML文件流
    // 例如，在mounted钩子中调用一个API来获取XML文件流，并传入previewXml方法
    mounted() {
        // 示例：假设你有一个API可以获取XML文件流
        // fetch('/api/get-xml-stream')
        //   .then(response => response.blob())
        //   .then(blob => this.previewXml(blob));
    }
};
</script>
  
<style scoped>
/* 添加一些样式来美化你的XML预览 */
div {
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #f5f5f5;
    padding: 10px;
    border: 1px solid #ccc;
}
</style>
  